<template>
    <div class="card_item">

        <div class="left">
            <input type="checkbox" v-model="item.checked" class="ck"/>
            <img :src="item.pic"/>
            <div class="text">
                <div class="title">{{ item.title }}</div>
                <van-stepper :min="1" v-model="item.count" button-size="30px"/>
            </div>
        </div>

        <div class="price">{{ item.count * item.price }}</div>
    </div>
</template>

<script lang="ts">
export default{
    props:['item']
    
}
</script>

<style lang="less">
.card_item{
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    padding: 10px;

    .left{
        display: flex;
        align-items: center;
        flex: 1;

        .ck{
            width: 8px;
            height: 15px;
        }

        .text{
            margin-left: 15px;
            .van-stepper_input{
                font-size: 12px;

            }

            .title{
                font-size: 10px;
                font-weight: bold;
            }
        }
    }
}
</style>